<template>
  <div>

    <el-row>
      <el-col :span="24" id="VenueExamine1">

        <el-select v-model="enterStateChos" placeholder="请选择">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>


        <el-table :data="page.records" border>

          <el-table-column prop="coachId" label="申请教练id" width="100">
          </el-table-column>
          <el-table-column prop="createTime" label="申请时间" width="108">
          </el-table-column>

          <el-table-column prop="enterState" label="申请状态" width="90">
            <template slot-scope="scope">
              <template v-if="scope.row.enterState == 0">
                驳回
              </template>
              <template v-if="scope.row.enterState == 1">
                待审核
              </template>
              <template v-if="scope.row.enterState == 2">
                成功
              </template>
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="驳回原因" width="115">
          </el-table-column>
          <el-table-column prop="dealTime" label="处理时间" width="115">
          </el-table-column>

          <el-table-column label="查看简历" width="100">
            <template #default="scope">
              <el-button @click="showResume(scope.row.coachId)" type="text" size="small">打开简历</el-button>
            </template>
          </el-table-column>


          <el-table-column label="操作" width="150">
            <template #default="scope">

              <el-button @click="pass(scope.row.coachId)" v-if="scope.row.enterState == '1'" type="text"
                size="small">通过</el-button>
              <el-button @click="rejectShow(scope.row.coachId)" v-if="scope.row.enterState == '1'" type="text"
                size="small">驳回</el-button>

            </template>
          </el-table-column>

        </el-table>

        <el-dialog title="简历" :visible.sync="resumeShowIf" style="width: 70%; text-align: left; ">
          <el-card :body-style="{ padding: '0px' }">
            <img :src="resume.image" class="image" alt="暂无信息 请完善信息">
            <div style="padding: 14px;">
              <div>
                 姓名:{{resume.name}}<br />&nbsp
                性别：<span>{{resume.gender==1?'男':'女'}}</span>&nbsp
                年龄:{{resume.age}}<br />&nbsp
              </div>
              <div class="bottom clearfix">
                <i class="el-icon-mobile-phone"></i>手机号码：
                <span class="time">{{resume.phone}}</span>
                &nbsp&nbsp&nbsp
                <i class="el-icon-s-home"></i>
                住址：{{resume.address}}<br />
              </div>
              <div>
                学历：{{resume.education}}&nbsp&nbsp
                毕业院校：{{resume.graduate}}<br>
                工作履历：{{resume.jobResume}}<br />
              </div>
            </div>
          </el-card>

          <el-button @click="resumeShowIf = false" type="danger" round>关闭</el-button>
        </el-dialog>

        <el-dialog title="驳回" :visible.sync="rejectIf" style="width: 30%;">
          <el-input v-model="rejectRemark" placeholder="请输入原因"></el-input>
          <el-button @click="reject()" type="text" size="small">确认</el-button>
          <el-button @click="closeRejectDialog" type="text" size="small">取消</el-button>
        </el-dialog>


        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="page.pageNum" :page-sizes="[1, 2, 3, 5]" :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="page.total">
        </el-pagination>

      </el-col>
    </el-row>

  </div>
</template>

<script>
  export default {
    name: "CoachExamineManagement",
    data() {
      return {
        page: {},
        param: {
          pageNum: 1,
          pageSize: 5,
        },
        enterStateChos: "",
        options: [{
          value: '0',
          label: '驳回'
        }, {
          value: '1',
          label: '待审核'
        }, {
          value: '2',
          label: '成功'
        }, {
          value: '',
          label: '全部'
        }],
        resumeShowIf: false,
        resume: {},
        coachId: "",
        rejectIf: false,
        rejectRemark: "",

      }
    },
    methods: {
      closeRejectDialog() {
          this.rejectIf = false;
        },
      rejectShow(id) {
        this.coachId = id
        this.rejectIf = true
      },
      reject() {
        this.$http.post("/venue/yCoachEnter/rejectCoachEnterPlate", {
          coachId: this.coachId,
          remark: this.rejectRemark
        }).then(resp => {
          if(resp.data.code==200){
            this.rejectIf = false;
          }
          this.loadAllCoachExamine();
        });
      },
      // 加载简历并打开
      showResume(coachId) {
        this.$http.get("/account/yCoachResume/yCoachResumes", {
          params: {
            coachId: coachId
          }
        }).then(resp => {
          this.resume = resp.data.data
        });

        this.resumeShowIf = true
      },
      // 通过教练入驻场馆申请
      pass(coachId) {
        this.$http.get("/venue/yCoachEnter/passCoachEnterPlate", {
          params: {
            coachId: coachId
          }
        }).then(resp => {
          this.$message({
            message: resp.data.msg,
            type: 'success'
          });
          this.loadAllCoachExamine();
        });
      },
      // 分页pageSize变化
      handleSizeChange(val) {
        this.param.pageSize = val;
        this.loadAllCoachExamine();
      },
      // 分页pageNum变化
      handleCurrentChange(val) {
        this.param.pageNum = val;
        this.loadAllCoachExamine();
      },
      // 加载教练入驻平台申请分页
      loadAllCoachExamine() {
        this.$http.get("/venue/yCoachEnter/pageCoachEnterPlateByVenueId", {
          params: {
            enterState: this.enterStateChos,
            pageNum: this.param.pageNum,
            pageSize: this.param.pageSize
          }
        }).then(resp => {
          this.page = resp.data.data;
        })
      }

    },
    created() {
      this.loadAllCoachExamine();
    }
  }
</script>

<style>
  #VenueExamine2 {
    margin-left: -520px;
    line-height: 100%;
    width: 100%
  }

  #VenueExamine1 {
    line-height: 100%;
    width: 100%
  }
  .image {
    width: 100%;
    height: 600px;
    display: block;
  }
</style>
